<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开心记账本</title>

    <style>
        .go-home {
            position: fixed;
            bottom: 5%;
            right: 1%;
            z-index: 888;
            border-radius: 40px;
            opacity: 0.9;
        }

    </style>
    <link rel="stylesheet" href="../plugins/bootstrap-4.5.3-dist/css/bootstrap.min.css">
    <script src="../plugins/jquery/jquery-3.5.1.min.js"></script>
    <script src="../plugins/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <script src="../plugins/vue/axios.min.js"></script>
</head>
<body>

<div id="app">
    <!-- 头部 -->
    <div class="container-fluid">
        <div class="row" style="background-color: #ffda44;height: 150px;padding: 43px 0;">
            <div class="col-sm-4" style="text-align: center;padding-top: 10px;">
                <div style="font-size: 2.3em;">
                    2022年
                </div>
            </div>

            <div class="col-sm-4" style="text-align: center;">
                <div style="font-size: 1.3em;">
                    收入
                </div>
                <div style="font-size: 2.2em;">
                    {{totalShouru}}元
                </div>
            </div>

            <div class="col-sm-4" style="text-align: center;">
                <div style="font-size: 1.3em;">
                    支出
                </div>
                <div style="font-size: 2.2em;">
                    {{totalZhichu}}元
                </div>
            </div>
        </div>
    </div>

</div>

<view class="go-home">
    <img src="../image/add.png" style="width: 120px;height: 120px;"/>
</view>


<script>
    new Vue({
        el: '#app',
        data: {
            accountDataList: [],
            totalShouru: '500',
            totalZhichu: '500',
            formData: {
                account_type: '',
                account_num: '',
                account_desc: ''
            }
        },
        methods: {
            //提交数据到后台
            submitData() {
                console.log(this.formData);
                axios.post("/save", this.formData).then(response => {
                    $('#myModal').modal('hide');//隐藏弹出框
                    this.getAccountList();
                    alert(response.data.message);
                }).catch(function (error) { // 请求失败处理
                    console.log(error);
                    fail_prompt("请求发生异常", 5000);
                });
            },
            //向后台发送请求，获取用户所有记账记录
            getAccountList() {
                axios.get("/list", '').then(response => {
                    console.log('后台有响应数据来了');
                    console.log(response);
                    var data = response.data;
                    this.totalShouru = data.totalShouru;
                    this.totalZhichu = data.totalZhichu;
                    this.accountDataList = data.userAccountList;
                }).catch(function (error) { // 请求失败处理
                    console.log(error);
                });
            }
        },
        //钩子函数
        mounted() {
            console.log('钩子函数执行了')
            this.getAccountList();
        }
    });
</script>

</body>
</html>
